import React,{useState} from 'react';

const Index = () => {
    const [msg,setMsg] =useState("")
    const [arr,setArr] =useState([]);
    const handleChange=(event)=>{
        setMsg(event.target.value)
    }
    const handleEnter=(event)=>{
        if(event.keyCode==13){
            setArr(()=>{
                arr.push(msg);
                return [...arr];
            })
            setMsg("")
        }
    }
    const handleDelete=(item)=>{
        setArr(()=>{
            let index=arr.indexOf(item)
            arr.splice(index,1)
            return [...arr]
        })
    }
    return (
        <div>
            <h2>todolist</h2>
            <input type="text" value={msg}
            onKeyUp={handleEnter}
            onChange={handleChange} />
            <p>{msg}</p>
            <div>
                {arr.map(item=>{
                    return (<div onClick={()=>handleDelete(item)} key={item}>{item}</div>)
                })}
            </div>
        </div>
    );
}

export default Index;
